<template>
	<div class="h-full bg-white">
		<a-card :bordered="false" :loading="onloading">
			<div class="flex gap-4">
				<!-- <a-image :width="80" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /> -->
				<a-avatar shape="square" :size="64">
					<template #icon><UserOutlined /></template>
				</a-avatar>
				<div class="text-left">
					<div class="my-[6px]">
						<span v-if="detailInfo.payment.signMethod === '0'" class="relative top-[2px] mr-[12px]">{{
							detailInfo.paymentPay.templateName || '-'
						}}</span>
						<a-tag color="#108ee9" class="h-[24px]">{{
							approvalStatusEnum[detailInfo.paymentPay.financeApprovalStatus] || '-'
						}}</a-tag>
					</div>
					<div>{{ detailInfo.paymentPay.payCode || '-' }}</div>
				</div>
			</div>

			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] mt-6 pl-2">基础信息</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">合同编号</div>
					<div>{{ detailInfo.payment.code }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">甲方抬头</div>
					<div>{{ detailInfo.payment.firstParty || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">乙方抬头</div>
					<div>{{ detailInfo.payment.secondPartyName || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">签约方式</div>
					<div>{{ signMethodEnum[detailInfo.payment.signMethod] || '-' }}</div>
				</div>
			</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">签约场景</div>
					<div>{{ signPayEnum[detailInfo.payment.signPayment] || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">合同总金额</div>
					<div>{{ detailInfo.payment.contractAmount || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">定金总金额</div>
					<div>{{ detailInfo.payment.depositAmount || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">尾款总金额</div>
					<div>{{ detailInfo.payment.balancePayment || '-' }}</div>
				</div>
			</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">尾款结清日期</div>
					<div>{{ detailInfo.payment.balancePaymentTime || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">合同创建人</div>
					<div>{{ detailInfo.payment.createUserName || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">创建时间</div>
					<div>{{ detailInfo.payment.createAt || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">签约日期</div>
					<div>{{ detailInfo.payment.signingDate || '-' }}</div>
				</div>
			</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">合同备注</div>
					<div>{{ detailInfo.payment.remark || '无' }}</div>
				</div>
			</div>

			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2 mt-5">补款信息</div>
			<a-table
				:columns="columns"
				:data-source="detailInfo.list"
				:scroll="{ x: 1500 }"
				:pagination="false"
				row-key="id"
				size="small"
				class="mt-[20px]"
			/>

			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">补款合计</div>
					<div>{{ detailInfo.paymentPay.receivedAmount || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">付款日期</div>
					<div>
						{{
							(detailInfo.paymentPay.payDate
								? detailInfo.paymentPay.payDate.substring(0, 10)
								: detailInfo.paymentPay.payDate) || '-'
						}}
					</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">付款凭证</div>
					<div class="text-blue-500 cursor-pointer" @click="onPreview">查看</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">备注</div>
					<div style="white-space: normal">{{ detailInfo.paymentPay.remark || '无' }}</div>
				</div>
			</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">提交人</div>
					<div>{{ detailInfo.paymentPay.createUserName || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">提交时间</div>
					<div>{{ detailInfo.paymentPay.createAt || '-' }}</div>
				</div>
				<div class="flex-1"></div>
				<div class="flex-1"></div>
			</div>

			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] mt-6 pl-2">收款信息</div>
			<div v-for="item in detailInfo.financeBoList" :key="item.id" class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">收款方式</div>
					<div>{{ item.companyAccountName }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">收款时间</div>
					<div>{{ item.payTime.substr(0, 10) }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">到账金额</div>
					<div>{{ item.receivedAmount }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">手续费</div>
					<div>{{ item.commission }}</div>
				</div>
			</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">备注</div>
					<div>{{ detailInfo.paymentPay.financeApprovalRemark || '-' }}</div>
				</div>
			</div>
		</a-card>

		<!-- 查看付款凭证 -->
		<image-preview ref="imagePreviewRef" />
	</div>
</template>
<script setup>
	import financePaymentApi from '@/api/biz/payment/bizFinancePaymentApi'
	import { signPayEnum, approvalStatusEnum, signMethodEnum } from '../contractManagement/enum/contractEnum'
	import { useRoute } from 'vue-router'
	import tool from '@/utils/tool'
	import ImagePreview from '@/components/drawer/imagePreview.vue'

	const route = useRoute()
	onBeforeMount(() => {
		getDetail(route.params.id)
	})

	const columns = [
		{
			title: '订单编号',
			dataIndex: 'orderNo',
			width: 160
		},
		{
			title: '业务类型',
			dataIndex: 'businessType',
			width: 80,
			customRender: ({ text }) => tool.dictTypeData('BUSINESS_TYPE', text)
		},
		{
			title: '服务类型',
			dataIndex: 'serviceTypeName',
			width: 280,
			ellipsis: true,
			customRender: ({ text, record }) => `${record.serviceClassName} > ${text} > ${record.serviceProjectName}`
		},
		{
			title: '订单金额',
			dataIndex: 'orderAmount',
			width: 80
		},
		{
			title: '定金金额',
			dataIndex: 'depositAmount',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '尾款金额',
			dataIndex: 'balancePayment',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '补款金额',
			dataIndex: 'payPayment',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '剩余尾款金额',
			dataIndex: 'reduceBalancePayment',
			width: 100,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '服务时长',
			dataIndex: 'serviceLife',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '赠送时长',
			dataIndex: 'giveMonth',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '开始服务月',
			dataIndex: 'serviceStime',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '结束服务月',
			dataIndex: 'serviceEtime',
			width: 80,
			customRender: ({ text }) => text || '-'
		}
	]

	/**
	 * ====================
	 *       基本逻辑
	 * ====================
	 */
	const detailInfo = reactive({
		financeBoList: [],
		payment: {},
		paymentPay: {}
	})
	const onloading = ref(false)
	const getDetail = (id) => {
		onloading.value = true
		financePaymentApi
			.getDetail({ id })
			.then((res) => {
				Object.assign(detailInfo, res)
				onloading.value = false
			})
			.finally(() => {
				onloading.value = false
			})
	}

	/**
	 * 查看凭证
	 */
	const imagePreviewRef = ref(null)
	const onPreview = () => {
		const { imgUrl } = detailInfo.paymentPay
		imgUrl &&
			imagePreviewRef.value.open({
				title: '查看付款凭证',
				tip: '凭证查看（点击图片查看大图）',
				list: imgUrl.split(',')
			})
	}
</script>
<style lang="less" scoped>
	.table_border :deep(th) {
		border-color: #6e6e6e !important;
	}
	.table_border :deep(td) {
		border-color: #6e6e6e !important;
	}
	.table_border :deep(table) {
		border-color: #6e6e6e !important;
	}
	.table_border :deep(td:first-child) {
		border-left: 1px solid #6e6e6e !important;
	}
	.table_border :deep(th:first-child) {
		border-left: 1px solid #6e6e6e !important;
	}
</style>
